import { useReducer } from 'react';

// 定义初始状态
const initialState = {
  count: 0,
  step: 1,
};

// 定义reducer函数，根据不同的action.type来更新state
function reducer(state, action) {
  switch (action.type) {
    case 'inc':
      // 增加count的值
      return { ...state, count: state.count + Number(action.payload) };
    case 'dec':
      // 减少count的值
      return { ...state, count: state.count - Number(action.payload) };
    case 'reset':
      // 重置count的值为初始值
      return initialState;
    case 'define':
      // 设置count的值为action.payload
      return { ...state, count: Number(action.payload) };
    case 'setStep':
      // 设置step的值为action.payload
      return { ...state, step: Number(action.payload) };
    default:
      // 默认返回state
      return state;
  }
}

// 定义DateCounter组件
function DateCounter() {
  // 使用useReducer钩子，传入reducer函数和初始状态
  const [state, dispatch] = useReducer(reducer, initialState);
  const { count, step } = state;

  // 定义一个日期对象，初始值为2027年6月21日
  const date = new Date('june 21 2027');
  // 根据count的值来更新日期
  date.setDate(date.getDate() + count);

  // 定义减少count的函数
  const dec = function () {
    dispatch({ type: 'dec', payload: step });
  };

  // 定义增加count的函数
  const inc = function () {
    dispatch({ type: 'inc', payload: step });
  };

  // 定义设置count的函数
  const defineCount = function (e) {
    dispatch({ type: 'define', payload: e.target.value });
  };

  // 定义设置step的函数
  const defineStep = function (e) {
    dispatch({ type: 'setStep', payload: e.target.value });
  };

  // 定义重置count的函数
  const reset = function () {
    dispatch({ type: 'reset' });
  };

  // 返回组件的JSX结构
  return (
    <div className='counter'>
      <div>
        <input
          type='range'
          min='0'
          max='10'
          value={step}
          onChange={defineStep}
        />
        <span>{step}</span>
      </div>

      <div>
        <button onClick={dec}>-</button>
        <input value={count} onChange={defineCount} />
        <button onClick={inc}>+</button>
      </div>

      <p>{date.toDateString()}</p>

      <div>
        <button onClick={reset}>Reset</button>
      </div>
    </div>
  );
}
// 导出DateCounter组件
export default DateCounter;
